<template>
    <div>
        <el-button @click="startHandleLogic">开始执行逻辑</el-button>

        <div>
            数据：
            <!-- <pre>dialogShownData: {{ dialogShownData }}</pre> -->
            <pre>userInfo: {{ userInfo }}</pre>
            phone: <el-input v-model="userInfo.phone"></el-input>
            number: <el-input v-model="userInfo.number"></el-input>
        </div>
        <br />
        <br />
        <br />
        <!-- 第一个显示, asyncContact 为 true 才会展示，展示关闭后判断 C 是否，否则判断 B 是否显示 -->
        <el-dialog class="A" v-model="openA" title="A">第一个显示, asyncContact 为 true 才会展示</el-dialog>
        <!-- 如果A没显示，就显示B; 如果 A 显示， 就不显示B，等到 A 关闭时判断是否 显示 C -->
        <el-dialog class="B" v-model="openB" title="B">如果A没显示，就显示B; 如果 A 显示， 就不显示B</el-dialog>
        <!-- A 和 B 都没显示或者 A / B 显示并关闭后，才显示这个C，但是 C 必须在 list 接口返回数据之后显示 -->
        <el-dialog class="C" v-model="openC" title="C">A 和 B 都没显示或者 A / B 显示并关闭后，才显示这个C，但是 C 必须在 list 接口返回数据之后显示</el-dialog>
        <!-- D 的优先级最低，等到 A/B/C 都显示且关闭后才显示, D 需要等 price 和 list 接口调用完成才显示 -->
        <el-dialog class="D" v-model="openD" title="D">D 的优先级最低，等到 A/B/C 都显示且关闭后才显示, D 需要等 price 和 list 接口调用完成才显示</el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

const openA = ref(false);
const openB = ref(false);
const openC = ref(false);
const openD = ref(false);
const isSuccessGetList = ref(false);
const isSuccessGetPrice = ref(false);
const userInfo = ref({
    userId: 1,
    phone: '2',
    number: 1
});
const isCanShownA = computed(() => {
    return userInfo.value.phone === '1'
});
const isCanShownB = computed(() => {
    return userInfo.value.number === 2
});

const dialogShownData = ref<any>({
    A: {
        stauts: 'waiting',
        shownFn: () => {
            if(isCanShownA.value) {
                openA.value = true;
                dialogShownData.value.A.nextAlert = 'D';
            } else {
                dialogShownData.value.A.nextAlert = 'B';
            }
        },
        closeFn: () => {
            openA.value = false;
        },
        nextAlert: ''
    },
    B: {
        shownFn: () => {
            if(isCanShownB.value) {
                openB.value = true;
                dialogShownData.value.B.nextAlert = 'D';
            } else {
                dialogShownData.value.B.nextAlert = 'C';
            }
        },
        closeFn: () => {
            openB.value = false;
        },
        nextAlert: ''
    },
    C: {
        shownFn: () => {
            if(isSuccessGetList.value) {
                openC.value = true;
            }
            dialogShownData.value.C.nextAlert = 'D';
        },
        closeFn: () => {
            openC.value = false;
        },
        nextAlert: ''
    },
    D: {
        shownFn: async() => {
            if(isSuccessGetList.value) {
                const res = await getPrice()
                if(res === 'success') {
                    openD.value = true;
                } 
            }
        },
        closeFn: () => {
            openD.value = false;
        },
    }
});
const startHandleLogic = async() => {
    const res = await getList()
    if(res === 'success') {
        isSuccessGetList.value = true;
        const res = await dialogShownData.value.A.shownPromise();
        const nextAlert = dialogShownData.value.A.nextAlert;
        const res2 = await dialogShownData.value[`${nextAlert}`].shownPromise();
        
        
    }
};

const getList = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success');
        }, 2000);
    })
}

const getPrice = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success');
        }, 3000);
    })
}
</script>

<style lang="scss" scoped></style>